<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="formData" label-postion="right" label-width="100px">
      <el-row class="aaa">
        <el-col>
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" placeholder="标题"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作者" prop="author">
            <el-input v-model="formData.author" placeholder="作者"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类" prop="categoryIds">
            <el-select style="width: 100%" v-model="formData.categoryIds" clearable filterable multiple>
              <el-option v-for="item in categoryList" :key="item.categoryId" :value="item.categoryId"
                         :label="item.categoryName"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="摘要">
            <el-input type="textarea" :row="2" maxlength="150" show-word-limit v-model="formData.profile"/>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="内容" prop="content">
            <vue-editor ref="editor" v-model="formData.content" useCustomImageHandler @image-added="uploadImage"/>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="评论">
            <el-radio-group v-model="formData.isComment">
              <el-radio :label="1">启用评论</el-radio>
              <el-radio :label="2">关闭评论</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button @click="showContent = !showContent">预览内容</el-button>
            <el-button type="primary" @click="update(1)">直接发布</el-button>
            <el-button type="warning" @click="update(2)">存为草稿</el-button>
            <el-button type="info" @click="$router.back()">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="my-editor" v-show="showContent">
      <div class="ql-container ql-snow">
        <div class="ql-editor" v-html="formData.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
const formData = {
  articleId: '',
  title: '',
  author: '',
  profile: '',
  content: '',
  isComment: 1,
  articleStatus: 1,
  categoryIds: []
}
export default {
  name: 'ArticleUpdate',
  data () {
    return {
      formData: { ...formData },
      rules: {
        title: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur'
        }],
        author: [{
          required: true,
          message: '作者不能为空',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '内容不能为空',
          trigger: 'blur'
        }],
        categoryIds: [{
          required: true,
          message: '请选择分类',
          trigger: 'blur'
        }, {
          validator: (rule, value, callback) => {
            if (this.formData.categoryIds.length > 0) {
              callback()
            } else {
              callback(new Error('请选择分类'))
            }
          },
          trigger: 'blur'
        }]
      },
      categoryList: [],
      showContent: false
    }
  },
  watch: {
    $route () {
      this.init()
    }
  },
  methods: {
    init () {
      if (this.$route.query.articleId) {
        this.$http.get(`admin/article/info/${this.$route.query.articleId}`).then(data => {
          this.formData = {
            ...data.data,
            categoryIds: data.data.categoryList.map(item => item.categoryId)
          }
        })
      } else {
        this.formData = { ...formData }
      }
    },
    getCategoryList () {
      this.$http.get('admin/category/select').then(data => {
        this.categoryList = data.data
      })
    },
    update (articleStatus) {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.formData.articleStatus = articleStatus
          this.$http.post('admin/article/update', this.formData).then(() => {
            this.$alert(`${articleStatus === 1 ? '发表' : '保存草稿'}成功`, { type: 'success' }).then(() => {
              this.$router.push('article')
            })
          })
        }
      })
    },
    uploadImage (file, editor, cursorLocation, restUpload) {
      const fileData = new FormData()
      fileData.append('file', file)
      this.$http.post('admin/upload', fileData).then(data => {
        /* 获取完整的图片地址 */
        const imageSrc = process.env.VUE_APP_API + 'img/' + data.fileName
        /* 图片存入编辑器 */
        editor.insertEmbed(cursorLocation, 'image', imageSrc)
        /* 重新渲染编辑器 */
        restUpload()
      })
    }
  },
  created () {
    this.getCategoryList()
    this.init()
  }
}
</script>

<style scoped>

</style>
